<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>{{ detail ? detail.name : '--' }}</h1>
          <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
          <el-tag v-if="detail.authStatus === 0" type="info"> {{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 1" type="success">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 2" type="warning">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 3" type="danger"> {{ detail.authStatusStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">手机号：{{ detail ? detail.mobile : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button v-if="detail.authStatus === 0" size="mini" @click="handleAuth(detail.id)">
          发起认证
        </el-button>
        <el-button v-if="detail.authStatus === 2" size="mini" @click="handleUpdate(detail.id)">
          编辑船舶
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions
        :column="1"
        title="| 身份证信息"
        :label-style="{ marginLeft: '40px', width: '120px' }"
      >
        <el-descriptions-item label="身份证照片">
          <el-descriptions :column="6" :colon="false">
            <el-descriptions-item>
              <el-image
                :src="detail.idCardFront"
                :preview-src-list="idCardFront"
                style="width: 200px; height: 150px; margin-right: 10px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-image
                :src="detail.idCardBack"
                :preview-src-list="idCardBack"
                style="width: 200px; height: 150px; margin-right: 10px"
              ></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>

        <el-descriptions-item v-for="(item, index) in idCardItems" :key="index" :label="item.label">
          {{ item.value }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        :column="1"
        title="| 船员适任证"
        :label-style="{ marginLeft: '40px', width: '120px' }"
      >
        <el-descriptions-item label="船员适任证照片">
          <el-image
            :src="detail.credentialsImg"
            :preview-src-list="credentialsImg"
            :fit="'contain'"
            style="width: 200px; height: 150px; margin-right: 10px"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="船员适任证名称">
          {{ detail.credentialsName }}
        </el-descriptions-item>
        <el-descriptions-item label="证件类型">
          {{ detail.credentialsTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="证件等级">
          {{ detail.credentialsLevelStr }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/crew';

export default {
  data() {
    return {
      detail: {
        id: null, // id
        mobile: null, // 手机号
        idCardFront: null, // 身份证正面(人像面)
        idCardBack: null, // 身份证背面(国徽面)
        name: null, // 姓名
        idCard: null, // 身份证号
        idCardAddress: null, // 身份证地址
        idCardIssue: null, // 发证机关名称
        idCardBegin: null, // 证件有效期开始时间
        idCardEnd: null, // 证件有效期结束时间
        credentialsImg: null, // 船员适任证照片
        credentialsName: null, // 船员适任证名称
        credentialsTypeStr: null, // 证件类型
        credentialsLevelStr: null, // 证件等级
        authStatus: null, // 状态
        authStatusStr: null, // 状态名称
      },
      idCardBack: [],
      idCardFront: [],
      credentialsImg: [],
    };
  },
  computed: {
    idCardItems() {
      return [
        { label: '船员姓名', value: this.detail ? this.detail.name : '' },
        { label: '船员身份证号码', value: this.detail ? this.detail.idCard : '' },
        {
          label: '身份证有效期',
          value: this.detail ? this.detail.idCardBegin + ' 至 ' + this.detail.idCardEnd : '',
        },
        { label: '身份证地址', value: this.detail ? this.detail.idCardAddress : '' },
        { label: '发证机关名称', value: this.detail ? this.detail.idCardIssue : '' },
      ];
    },
  },
  mounted() {
    this.getCrewDetails();
  },
  methods: {
    // 获取船舶详情
    getCrewDetails() {
      getDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
        this.idCardBack.push(this.detail.idCardBack);
        this.idCardFront.push(this.detail.idCardFront);
        this.credentialsImg.push(this.detail.credentialsImg);
      });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'CrewSave', query: { id: id } });
    },
    /**
     * 发起认证
     */
    handleAuth() {
      alert('发起认证，功能未实现');
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
